<template>
    <div>
        <el-row :gutter="20" class="mgb20">
            <el-col :span="6">
                <el-card shadow="hover" body-class="card-body">
                    <el-icon class="card-icon bg1">
                        <User />
                    </el-icon>
                    <div class="card-content">
                        <countup class="card-num color1" :end="users" />
                        <div>用户数量</div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover" body-class="card-body">
                    <el-icon class="card-icon bg2">
                        <ChatDotRound />
                    </el-icon>
                    <div class="card-content">
                        <countup class="card-num color2" :end="articles" />
                        <div>资讯数量</div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover" body-class="card-body">
                    <el-icon class="card-icon bg3">
                        <Goods />
                    </el-icon>
                    <div class="card-content">
                        <countup class="card-num color3" :end="pets" />
                        <div>领养宠物总数量</div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover" body-class="card-body">
                    <el-icon class="card-icon bg4">
                        <ShoppingCartFull />
                    </el-icon>
                    <div class="card-content">
                        <countup class="card-num color4" :end="collect" />
                        <div>收藏数量</div>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <el-row :gutter="20" class="mgb20">
            <el-col :span="18">
                <el-card shadow="hover">
                    <div class="card-header">
                        <p class="card-header-title">发布动态</p>
                        <p class="card-header-desc">最近15天发布宠物送养信息</p>
                    </div>
                    <v-chart class="chart" :option="dashOpt1" />
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover">
                    <div class="card-header">
                        <p class="card-header-title">领养宠物种类分布</p>
                        <p class="card-header-desc">数量统计</p>
                    </div>
                    <v-chart class="chart" :option="dashOpt2" />
                </el-card>
            </el-col>
        </el-row>

    </div>
</template>

<script setup lang="ts" name="dashboard">


import countup from '@/components/countup.vue';
import { use, registerMap } from 'echarts/core';
import { BarChart, LineChart, PieChart, MapChart } from 'echarts/charts';
import {
    GridComponent,
    TooltipComponent,
    LegendComponent,
    TitleComponent,
    VisualMapComponent,
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import VChart from 'vue-echarts';

import chinaMap from '@/utils/china';

// 导入接口地址
import { total_article, total_user, catetory_data, pet_num,total_pet_all , total_collect} from '../api/index'
import { reactive, ref } from 'vue';
import { graphic } from 'echarts/core';


use([
    CanvasRenderer,
    BarChart,
    GridComponent,
    LineChart,
    PieChart,
    TooltipComponent,
    LegendComponent,
    TitleComponent,
    VisualMapComponent,
    MapChart,
]);
registerMap('china', chinaMap);

// dashOpt1.xAxis.data
// dashOpt1.series[0].data
const dashOpt1 = reactive({
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
        type: 'value',
    },
    grid: {
        top: '2%',
        left: '2%',
        right: '3%',
        bottom: '2%',
        containLabel: true,
    },
    color: ['#009688', '#f44336'],
    series: [
        // {
        //     type: 'line',
        //     areaStyle: {
        //         color: new graphic.LinearGradient(0, 0, 0, 1, [
        //             {
        //                 offset: 0,
        //                 color: 'rgba(0, 150, 136,0.8)',
        //             },
        //             {
        //                 offset: 1,
        //                 color: 'rgba(0, 150, 136,0.2)',
        //             },
        //         ]),
        //     },
        //     smooth: true,
        //     data: [120, 132, 301, 134, 90, 230, 210],
        // },
        {
            type: 'line',
            smooth: true,
            data: [220, 122, 191, 234, 190, 130, 310],
        },
    ],
});

// dashOpt2.series[0].data
const dashOpt2 = reactive({
    legend: {
        bottom: '1%',
        left: 'center',
    },
    color: ['#3f51b5', '#009688', '#f44336', '#00bcd4', '#1ABC9C', '#7093DB', '#93DB70'],
    series: [
        {
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2,
            },
            data: [
                { value: 1048, name: '狗狗' },
                { value: 735, name: '猫咪' },
                { value: 580, name: '兔子' },
                { value: 484, name: '蛇类' },
                { value: 300, name: '其他' },
            ],
        },
    ],
})

let users = ref(0);
let articles = ref(0);
let pets = ref(0);
let collect = ref(0);
const init = async () => {

    // 收藏的数量
    await total_collect().then(
        content => {
            // console.log(0, content)
            let { code, result } = content;
            if (code == 200) {
                collect.value = result.total
            }
        }
    )
    // 总数量
    await total_pet_all().then(
        content => {
            // console.log(0, content)
            let { code, result } = content;
            if (code == 200) {
                pets.value = result.total
            }
        }
    )

    // 资讯文章总数
    await total_article().then(
        content => {
            console.log(1, content)
            let { code, result } = content;
            if (code == 200) {
                articles.value = result.total
            }
        }
    )
    // 用户总数
    await total_user().then(
        content => {
            console.log(2, content)
            let { code, result } = content;
            if (code == 200) {
                users.value = result.total
            }
        }
    )
    // 宠物分类数据
    await catetory_data().then(
        content => {
            console.log(3, content)
            let { code, result } = content;
            if (code == 200) {
                let arr = result.map(item => {
                    return {
                        value: item.total,
                        name: item.category,
                        id: item.id
                    }
                })
                // 饼状图展示分类对应的数量
                dashOpt2.series[0].data = arr;
            }
        }
    )

    // 最近15天发布的数据
    await pet_num().then(
        content => {
            // console.log(4,content)
            let { code, result } = content;
            if (code == 200) {
                let arr1 = result.map(item => item.datetime)
                let arr2 = result.map(item => item.num)
                // 饼状图展示分类对应的数量
                dashOpt1.xAxis.data = arr1;
                dashOpt1.series[0].data = arr2;
            }
        }
    )
}

init()

</script>

<style>
.card-body {
    display: flex;
    align-items: center;
    height: 100px;
    padding: 0;
}
</style>
<style scoped>
.card-content {
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: #999;
    padding: 0 20px;
}

.card-num {
    font-size: 30px;
}

.card-icon {
    font-size: 50px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    color: #fff;
}

.bg1 {
    background: #2d8cf0;
}

.bg2 {
    background: #64d572;
}

.bg3 {
    background: #f25e43;
}

.bg4 {
    background: #e9a745;
}

.color1 {
    color: #2d8cf0;
}

.color2 {
    color: #64d572;
}

.color3 {
    color: #f25e43;
}

.color4 {
    color: #e9a745;
}

.chart {
    width: 100%;
    height: 400px;
}

.card-header {
    padding-left: 10px;
    margin-bottom: 20px;
}

.card-header-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
}

.card-header-desc {
    font-size: 14px;
    color: #999;
}

.timeline-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    color: #000;
}

.timeline-time,
.timeline-desc {
    font-size: 12px;
    color: #787878;
}

.rank-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.rank-item-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f2f2f2;
    text-align: center;
    line-height: 40px;
    margin-right: 10px;
}

.rank-item-content {
    flex: 1;
}

.rank-item-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #343434;
    margin-bottom: 10px;
}

.rank-item-desc {
    font-size: 14px;
    color: #999;
}

.map-chart {
    width: 100%;
    height: 350px;
}
</style>
